<template>
  <div>
    <div>
      <el-carousel height="500px">
        <el-carousel-item>
          <img src="../img/diving/hah.png" height="640" width="1920"/>
        </el-carousel-item>
        <el-carousel-item>
          <img src="../img/diving/img1.png" height="640" width="1920"/>
        </el-carousel-item>
        <el-carousel-item>
          <img src="../img/diving/img3.png"/>
        </el-carousel-item>
        <el-carousel-item>
          <img src="../img/diving/img5.jpg" height="550" width="1920" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="../img/diving/img6.jpeg" height="500" width="1920"/>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="selectedFrom">
      <div class="radio">
        <el-radio v-model="radio" label="1">全部</el-radio>
        <el-radio v-model="radio" label="2">酒店</el-radio>
        <el-radio v-model="radio" label="3">目的地</el-radio>
        <el-radio v-model="radio" label="4">机票</el-radio>
      </div>

      <el-form>
        <el-form-item>
          <el-input  placeholder="巴黎"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning"><i class="fa fa-search" aria-hidden="true"></i></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div class="blockLink" id="link1">
        <a class="sales-entrys-item entrys-bg-sales" href="">
          <div class="sales-entrys-title">
            自由行
          </div>
          <div class="sales-entrys-subtitle">
            旅行就要更自在
          </div>
        </a>
      </div>
      <div class="blockLink" id="link2">
        <a class="sales-entrys-item entrys-bg-sales" href="" >
          <div class="sales-entrys-title">
            跟团游
          </div>
          <div class="sales-entrys-subtitle">
            行程透明省心游
          </div>
        </a>
      </div>
      <div class="blockLink" id="link3">
        <a class="sales-entrys-item entrys-bg-sales" href="">
          <div class="sales-entrys-title">
            当地游
          </div>
          <div class="sales-entrys-subtitle">
            最地道玩法体验
          </div>
        </a>
      </div>
      <div class="blockLink" id="link4">
        <a class="sales-entrys-item entrys-bg-sales" href="">
          <div class="sales-entrys-title">
            机票
          </div>
          <div class="sales-entrys-subtitle">
            特惠一折起
          </div>
        </a>
      </div>
      <div class="blockLink" id="link5">
        <a class="sales-entrys-item entrys-bg-sales" href="http://localhost:8080/#/index/hotel/diving">
          <div class="sales-entrys-title">
            订酒店
          </div>
          <div class="sales-entrys-subtitle">
            一键全网比价
          </div>
        </a>
      </div>
      <div class="blockLink" id="link6">
        <a class="sales-entrys-item entrys-bg-sales" href="">
          <div class="sales-entrys-title">
            签证
          </div>
          <div class="sales-entrys-subtitle">
            出签率高服务佳
          </div>
        </a>
      </div>
      <div class="blockLink" id="link7">
        <a class="sales-entrys-item entrys-bg-sales" href="">
          <div class="sales-entrys-title">
            邮轮
          </div>
          <div class="sales-entrys-subtitle">
            移动的海上城堡
          </div>
        </a>
      </div>
    </div>
    <div id="message">

    </div >
    <el-row v-for="item in list">

        <el-col :span="8">
          <div style="display: inline-block">
            <img :src="item.m_address" style="height: 200px; width: 260px">
          </div>
        </el-col>
        <el-col :span="16">
          <div class="title">
            {{item.m_title}}
          </div>
          <div class="content">
            {{item.m_content}}
          </div>

          <span>{{item.m_date}}</span>

        </el-col>

    </el-row>
    </div>

</template>

<script>
    export default {
        name: "index",
        data:function () {
          return{
            radio:'',
            list:[]
          }
        },mounted() {
        let _this=this;
        _this.axios({
          url: 'http://localhost:3000/api/message/message',
          method:'get'
        }).then(function (res) {
          _this.list = res.data.data;
        })
      },
    }


</script>

<style scoped>
  .el-form-item{
    display: inline-block;
  }
  .selectedFrom{
    width: 632px;
    background-color: rgba(0,0,0,.6);
    border-radius: 4px;
    height: 100px;
    position: absolute;
    top: 420px;
    left: 450px;
    z-index: 2;
  }
  .el-input{
    width: 550px;
    margin-top: 15px;
  }
  .el-radio{
    color: white;
    font-size: 20px;
  }
  .radio{
    width: 400px;
    margin-left: 0px;
    margin-top: 10px;
  }
  .sales-entrys-title {
    margin-left: 40px;
    display: inline-block;
    height: 25px;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    font-family: PingFangSC-Semibold;
    color: black;
  }
  .sales-entrys-subtitle {
    float: right;
    height: 20px;
    padding-top: 3px;
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    font-family: PingFangSC-Regular;
    color: #9d9d9d;
    width: 100px;
  }
  a{
    text-decoration: none;
  }
  .blockLink{
    margin-left: 20px;
    display: inline-block;
    border: .5px solid #e5e5e5;
    margin-top: 40px;

    width: 160px;
    height: 50px;
    background-size: 60% 100%;
    background-repeat: no-repeat;
    border-radius: 5px;
  }
  .blockLink:hover{
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.08);
  }
  #link1{
    background-image: url("./img/8.png");
  }
  #link2{
    background-image: url("./img/1.png");
  }
  #link3{
    background-image: url("./img/2.png");
  }
  #link4{
    background-image: url("./img/5.png");
  }
  #link5{
    background-image: url("./img/7.png");
  }
  #link6{
    background-image: url("./img/4.png");
  }
  #link7{
    background-image: url("./img/3.png");
  }
  .el-row{
    width: 800px;
    height: 200px;
    margin-left: 35%;
    margin-top: 30px;

  }
  .el-row:hover{
    color: #ff8a00;
    background-color: #f8f8f8;
  }
  .title{
    font-size: 18px;

  }
  .content{
    color: #666;
    margin-top: 20px;
  }
</style>
